<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="选择序列号-用于调拨单的入库选择">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        .managerSn{
            cursor: pointer;
            color: #01AAED;
            text-decoration: none;
            font-size: 12px;
        }
        .managerSn:hover {
            color: #FF5722;
        }

        .button-bottom{
            color: #393D49;
            cursor: pointer;
            font-size: 12px;
            padding: 10px 14px;
            margin: 4px;
            border: 1px solid #d2d2d2;
            border-radius: 2px;
        }
        .button-bottom:hover{
            color: #5FB878;
        }

        .button-bottom-blue{
            cursor: pointer;
            color: #ffffff;
            font-size: 12px;
            background-color: #1E9FFF;
            padding: 10px 20px;
            margin: 2px;
            border-radius: 2px;
        }
        .button-bottom-blue:hover{
            background-color: #5FB878;
            color: #ffffff;
        }

        .tag{
            float: left;
            margin: 10px 10px 0 0;
            border: 1px #dddddd solid;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }

        .tag:hover{
            border: 1px #5FB878 solid;
        }

        .layui-icon-close{
            padding-left: 4px;
            font-size: 14px;
        }
        .layui-icon-close:hover{
            color: #FF5722;
        }


    </style>

    <script>
        //map : key-id   value-goodsSn

        jQuery(function () {

            $("#houseName").html("${house.name}");
            $("#stockNumber").html(getNumber("${stockNum}"));

            layui.use(['table','form','element'], function() {
                let table = layui.table,
                form = layui.form;


                get("${baseUrl}house/goodsSn/listOutByGoodsTransferId.action?goodsTransferId=${goodsTransferId}&goodsId=${goodsId}",function (res) {
                    if (res.code == 0) {
                        //获取成功
                        setListToMap(res.data,wait_map);
                    } else {
                        wait_map = {};
                    }

                    renderTwoTable();
                });

                table.on('row(table)', function(obj){
                    setDataToMap(obj.data,select_map);
                    removeByData(obj.data,wait_map);
                    reloadTableSelected(genListFromMap(select_map));
                    reloadTable(genListFromMap(wait_map));
                });

                table.on('row(tableSelected)', function(obj){
                    removeByData(obj.data,select_map);
                    setDataToMap(obj.data,wait_map);
                    reloadTableSelected(genListFromMap(select_map));
                    reloadTable(genListFromMap(wait_map));
                });

            });
        });

        function renderTable(list) {
            layui.table.render({
                id:'table',
                elem: '#table',
                height:300,
                limit: Number.MAX_VALUE,
                data:list,
                    text: {
                    none: '当前已无任何可选序列号' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                cols: [[
                    {type:'numbers'},
                    {field: 'sn', minWidth: 120, title: '序列号',style:"font-size:12px;"},
                ]]
            });
        }

        function reloadTable(list) {
            layui.use(['table','element'], function() {
                let table = layui.table;
                table.reload('table',{data:list});
            });
        }

        function renderTableSelected(list) {
            layui.use(['table','element'], function() {
                let table = layui.table;

                console.log("sn renderTableSelected");
                table.render({
                    id:'tableSelected',
                    elem: '#tableSelected',
                    height:300,
                    data: list,
                    limit: Number.MAX_VALUE,
                    text: {
                        none: '请从左侧选择序列号' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                    },
                    cols: [[
                        {type:'numbers'},
                        {field: 'sn', minWidth: 120, title: '序列号',style:"font-size:12px;"},
                    ]],
                    done:function () {
                        $("#selectedSnNumber").html(getMapLength(select_map));
                    }
                });
            });
        }

        function reloadTableSelected(list) {
            layui.use(['table','element'], function() {
                let table = layui.table;
                console.log("sn reloadTableSelected");
                table.reload('tableSelected',{data:list});
            });
        }




        let wait_map = {};
        let select_map = {};


        function genListFromMap(map) {
            let list=[];
            //获取已选择的数据
            for (var key in map){
                if (map[key] != undefined) {
                    let data = map[key];
                    delete data.LAY_TABLE_INDEX;
                    list.push(data);
                }
            }
            return list;
        }

        function setDataToMap(d,map) {
            map[d.sn] = d;
        }

        function setListToMap(list,map) {
            $.each(list, function (i,d) {
                map[d.sn] = d;
            });
        }

        function setMapToMap(map2Dest, mapSrc) {
            for (var key in mapSrc){
                if (mapSrc[key] != undefined) {
                    let data = mapSrc[key];
                    delete data.LAY_TABLE_INDEX;
                    map2Dest[data.sn] = data;
                }
            }
        }

        function removeByList(list,map) {
            $.each(list, function (i,d) {
                delete map[d.sn];
            });
        }

        function removeByData(d,map) {
            delete map[d.sn];
        }

        function  getMapLength(map) {
            return Object.keys(map).length;
        }

        function getBySn(sn, map) {
            let data = null;
            for (var key in map){
                if (map[key] != undefined && map[key].sn.indexOf(sn)!=-1) {
                    data = map[key];
                    delete data.LAY_TABLE_INDEX;
                    return data;
                }
            }
            return data;
        }

        function renderTwoTable() {
            if (select_list == undefined || getMapLength(wait_map) == 0) {
                renderTableSelected(genListFromMap(select_map));
                renderTable(genListFromMap(wait_map));
            } else {
                setListToMap(select_list,select_map);
                removeByList(select_list,wait_map);
                removeByList(use_list,wait_map);
                renderTableSelected(genListFromMap(select_map));
                renderTable(genListFromMap(wait_map));
                select_list = undefined;
            }
        }

        let select_list = undefined;
        let use_list = undefined;
        function setDataToTable(selectList,useMap) {
            select_list = selectList;
            use_list = useMap["${goodsId}"]==undefined ? [] : useMap["${goodsId}"];
            renderTwoTable();

            $("#stockNumber").html(getNumber("${stockNum}")-use_list.length);
        }

    </script>

</html:header>
<body style="background-color: #ffffff; padding-bottom: 30px; min-width: 500px">
    <div id="snDiv">
        <div style="color: #999999;">
<%--            [仓库：<span id="houseName" style="color: #FF5722;"></span>]--%>
<%--            <span style="padding-left: 10px;">库存数量 <span id="stockNumber" style="color:#FF5722">0</span></span>--%>
        </div>
        <hr>

        <div>
            <div class="layui-inline">
                <input type="text" name="sn" placeholder="输入或扫描序列号" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-inline">
                <a class="layui-btn" id="select">选择</a>
            </div>

            <script>
                $("#select").click(function () {
                    let sn = $('[name="sn"]').val();
                    let data = getBySn(sn,wait_map);
                    if (data != null) {
                        removeByData(data,wait_map);
                        setDataToMap(data,select_map);
                        reloadTable(genListFromMap(wait_map));
                        reloadTableSelected(genListFromMap(select_map));
                    }
                    $('[name="sn"]').val('');
                });
            </script>
        </div>



        <div style="clear: both;"></div>

        <div style="overflow: hidden;">
            <div style="float: left;width: 200px;">
                <table class="layui-hide" id="table" lay-filter="table" lay-size="sm"></table>
            </div>


            <div style="float: left;width: 100px;height: 300px;text-align: center;">
                <div style="margin: 120px 0 20px 0px;">
                    <button id="selectSn" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-next"></i>
                    </button>
                </div>
                <div>
                    <button id="backSn" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-prev"></i>
                    </button>
                </div>

                <script>
                    $("#selectSn").click(function () {
                        setMapToMap(select_map,wait_map);
                        wait_map = {};

                        renderTable(genListFromMap(wait_map));
                        renderTableSelected(genListFromMap(select_map));
                     });

                    $("#backSn").click(function () {
                        setMapToMap(wait_map, select_map);
                        select_map = {};

                        renderTable(genListFromMap(wait_map));
                        renderTableSelected(genListFromMap(select_map));
                    });
                </script>
            </div>

            <div style="float: right;width: 200px; padding-right: 20px;">
                <table class="layui-hide" id="tableSelected" lay-filter="tableSelected" lay-size="sm"></table>
            </div>
        </div>

        <hr style="margin-right: 20px;"/>
        <div style="overflow: hidden;">
            <div style="float: left;">
                <span>已选 <span id="selectedSnNumber" style="color:#FF5722">0</span>个</span>
            </div>

            <div style="float: right; padding-right: 20px;">
                <a id="sure" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search">确认</a>
                <a id="backParent" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="search">取消</a>
            </div>


        </div>

        <script>
            $("#sure").click(function () {
                console.log("table.cache.data："+ JSON.stringify(layui.table.cache.table));
                if (window.parent.processSnSelect != undefined){
                    let data=genListFromMap(select_map);
                    window.parent.processSnSelect(data);
                }
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            $("#backParent").click(function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });
        </script>
    </div>
</body>
<html:loading/>
</html>